<template>
  <div style="padding-bottom:50px;">
    <div v-title>保单详情</div>
    <!--支付金额-->
    <div class="D1" style="padding-bottom: 30px;">
      <template v-if="Data.IsPay==0">
        <div class="D1T1" v-if="this.$route.params.who == 0">本期支付金额(￥)</div>
        <div class="D1T1" v-if="this.$route.params.who == 1">所需支付金额(￥)</div>
        <!--支付金额-->
        <div class="D1T2">{{Data.OrderAmount}}</div>
        <!--最后还款日期-->
        <div class="D1T3" v-if="this.$route.params.who == 0">最后付款日期 &nbsp; {{HKRQ}}</div>
        <div class="D1T4 iconfont icon-jinxingzhong1"></div>
      </template>
      <template v-if="Data.IsPay==1">
        <div class="D1T8">本期已经付清了</div>
        <!--支付金额-->
        <div class="D1T9 iconfont icon-xinzengdianzandaiquan"></div>
        <div style="color:#999999;" class="D1T4 iconfont icon-yiwancheng"></div>
      </template>
    </div>
    <!--商业险保单详情-->
    <div class="D2" v-if="this.$route.params.who == 0">
      <div class="D2T">
        <div class="D2T1">保单总额</div>
        <div class="D2T2">￥{{Data.OrderTotalAmount}}
          <span style="color:#999999;">(包含手续费:￥{{Data.OrderServiceCharge}})</span>
        </div>
      </div>
      <div class="D2T">
        <div class="D2T1">保单期限</div>
        <div class="D2T2">
          <template v-if="Data.StartTime!=undefined || Data.EndTime!=undefined">
            {{Data.StartTime.split(' ')[0]}}至{{Data.EndTime.split(' ')[0]}}
          </template>
        </div>
      </div>
      <div class="D2T">
        <div class="D2T1">当前期数</div>
        <div class="D2T2">第<span style="color:red">{{Data.PeriodsCount}}</span>/{{Data.PeriodsNumber}}期</div>
      </div>
      <div class="D2T" style="margin-bottom:10px;">
        <div class="D2T1">剩余保单总额</div>
        <div class="D2T2">{{shenyu}}</div>
      </div>
      <div class="D2CK" @click="$router.push('/StagesPlan/'+$route.params.id)">
        <div class="D2CK1">分期付款计划</div>
        <div class="D2CK2 iconfont icon-youjiantou1"></div>
      </div>
      <div class="D2CK" @click="$router.push('/VoucherPhoto/'+$route.params.id +'/0/1')">
        <div class="D2CK1">电子协议</div>
        <div class="D2CK2 iconfont icon-youjiantou1"></div>
      </div>
    </div>
    <!--交强险保单详情-->
    <div class="D2" v-if="this.$route.params.who == 1">
      <div class="D2T">
        <div class="D2T1">保单期限</div>
        <div class="D2T2">
          <template v-if="Data.StartTime!=undefined || Data.EndTime!=undefined">
            {{Data.StartTime.split(' ')[0]}}至{{Data.EndTime.split(' ')[0]}}
          </template>
        </div>
      </div>
      <div class="D2CK" @click="$router.push('/VoucherPhoto/'+$route.params.id +'/1/1')" v-if="$route.params.who==0">
        <div class="D2CK1">电子协议</div>
        <div class="D2CK2 iconfont icon-youjiantou1"></div>
      </div>
    </div>
    <van-cell-group style="margin-top:20px;" v-if="this.$route.params.who == 0" class="noline">
      <van-cell title="车主姓名" :value="Order.CarOwner" />
      <van-cell title="车牌号码" :value="Order.PlateNumber" />
       <van-cell title="车主保单" :value="Data.PlateNumber" is-link  @click="toPolicyPhoto"/>
    </van-cell-group>
    <van-cell-group style="margin-top:20px;" v-if="this.$route.params.who == 1">
      <van-cell title="车主姓名" :value="Data.CarOwner" />
      <van-cell title="车牌号码" :value="Data.PlateNumber" />
       <van-cell title="车主保单" :value="Data.PlateNumber" is-link @click="toPolicyPhoto" /> 
    </van-cell-group>
    <div v-if="Data.IsPay==0 &&this.$route.params.who == 0"  @click="$router.push('/FQPay/'+$route.params.id+'/'+$route.params.number)" class="Bottom">确认支付</div>
    <div v-if="Data.IsPay==0 &&this.$route.params.who == 1" @click="$router.push('/FQPay/'+$route.params.id+'/-1')" class="Bottom">确认支付</div>

  </div>
</template>
<style src="../css/iconfont.css"></style>
<script>
  import api from '../fetch/api.js';
  import { Cell, CellGroup } from 'vant';
  export default {
    components: {
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
    },
    data() {
      return {
        //保存数据
        Data: '',
        Order:'',
        shenyu:'',
        //最后还款日期 
        HKRQ: '',
        Bottom: false,
      }
    },
    methods: {
      toPolicyPhoto(){
          this.$router.push('/PolicyPhoto/'+this.$route.params.id)
      },
      //获取订单数据
      GetInfor() {
        if(this.$route.params.who == 0){
          api.Post("Order/StagingDetail/GetNowStagingDetail", {
            PolicyID: this.$route.params.id,
            PeriodsCount: this.$route.params.number,
          }).then(res => {
            this.Data = res;
            var RQ = res.LastTime.split(' ')[0].split('-');
            this.HKRQ = parseFloat(RQ[1]) + "月" + parseFloat(RQ[2]) + "日";
          })
        }else{
          api.Post("Insurance/PHInsuranceOrder/GetModel", {
            ID: this.$route.params.id,
            PeriodsCount: this.$route.params.number,
          }).then(res => {
            this.Data = res;
          })
        }
        //
        if(this.$route.params.who == 0){
          //获取订单详情
          api.Post('Order/PolicyOrder/GetOneModel',{
            ID: this.$route.params.id,
          }).then(res => {
            this.Order = res
          })
          api.Post('Order/StagingDetail/GetNoPayAmount',{
            PolicyID: this.$route.params.id,
          }).then(res => {
            this.shenyu = res.Infor
          })
        }
      },
    },
    mounted() {
      this.GetInfor();
    }
  }
 
</script>
<style scoped>
  .D1T8 {
    font-size: 14px;
    color: #666666;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
  }

  .D1T9 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
    font-size: 80px;
    color: #f33e16;
  }

  .D1T7 {
    position: absolute;
    right: 20px;
    top: 65px;
    border-bottom: 10px solid #fff;
    border-left: 10px solid #999999;
    border-right: 10px solid #999999;
  }

  .D1T6 {
    position: absolute;
    right: 20px;
    top: 65px;
    border-bottom: 10px solid #fff;
    border-left: 10px solid #0dbb68;
    border-right: 10px solid #0dbb68;
  }

  .Bottom {
    height: 45px;
    width: 90%;
    border-radius: 5px;
    margin: 0 auto;
    background: #2491ff;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: rgb(255, 255, 255);
    margin-top: 30px;
  }


  .D2CK2 {
    font-size: 20px;
    color: #999999;
  }

  .D2CK {
    border-top: 1px solid #eeeeee;
    padding: 10px 0;
    font-size: 14px;
    color: rgb(51, 51, 51);
    display: flex;
    justify-content: space-between;
  }

  .D2T {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 35px;
  }

  .D2T1 {
    font-size: 14px;
    color: rgb(153, 153, 153);
  }

  .D2T2 {
    font-size: 13px;
    color: #333333;
  }

  .D2 {
    width: 90%;
    background: #fff;
    padding: 2.5% 5%;
    margin-top: 10px;
    padding-bottom: 0;
  }

  .D1 {
    background: #fff;
    position: relative;
  }

  .D1T1 {
    font-size: 14px;
    color: rgb(102, 102, 102);
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
  }

  .D1T2 {
    font-size: 30px;
    color: rgb(51, 51, 51);
    text-align: center;
    margin-top: -10px;
  }

  .D1T3 {
    font-size: 12px;
    color: rgb(243, 62, 22);
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .D1T4 {
    position: absolute;
    width: 20px;
    height: 45px;
    display: flex;
    justify-content: center;
    text-align: center;
    color: #0dbb68;
    font-size: 60px;
    top: 20px;
    right: 20px;
  }

  .D1T5 {
    position: absolute;
    width: 20px;
    height: 45px;
    background: #999999;
    display: flex;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-size: 14px;
    top: 20px;
    right: 20px;
    line-height: 15px;
  }
  .noline .van-hairline--top-bottom::after{
    border-width:0px;
  }

</style>
